<template>
  <div>
       <comment-header>全部</comment-header>
       <div v-for="(item,index) in contentList" :key="index">
          <div class="box">
              <div class="boxx">
                        <span class="rightmost">〉</span>
           <div class="box_left">
            <img :src="item.picture" alt="">
           </div>
           <div class="box_right">
               <div class="names" v-text="item.name"></div>
               <div class="englishName" v-text="item.english_name"></div>
               <div class="box_content">
                   <span v-if="item.reference_price == '' ">暂无</span>
                   <span v-if="item.reference_price != '' ">{{item.reference_price}}</span>
                   <span v-text="item.figure"></span>
               </div>
              </div>
           </div>
          </div>
       </div>
  </div>
</template>

<script>
import commentHeader from "../../components/comment/commentHeader"
  export default {
       components:{
    commentHeader     
  },
    data(){
        return{
            page:1,
            contentList:[],
           loadingMore: false
            
        }
    },
    mounted(){
        this.cycloContent();
         window.onscroll = this.didscroll;
    },
    methods:{
        cycloContent:function(){
            var that = this
            this.$http.get('/pet/v2/baikelist?page='+this.page+'&tag_id=0').then(function(data){
                console.log(data)
                that.contentList = data.body.data.list

            })
        },
         didscroll(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        var contentHeight = document.body.clientHeight
        var windowHeight = window.innerHeight
        if(scrollTop + windowHeight > contentHeight -60){
            if(this.loadingMore == false){
                this.loadMore();
             
            }
        }
    },
    loadMore(){
        this.loadingMore = true
        this.page += 1
        var that = this
        var url = '/pet/v2/baikelist?page='+this.page+'&tag_id=0'
        this.$http.get(url).then(function(data){
            that.contentList = that.contentList.concat(data.body.data.list)
            that.loadingMore = false
        })
       
    },
    }
  }
</script>

<style scoped>
.box{
    width: 95vw;
    background: white;
    margin: 0 auto;
   
}
.boxx{
    display: flex;
    text-align: left;
    width: 90vw;
    margin: 0 auto;
    border-bottom: 1px solid #f6f6f6;
    padding: 6vw 0 6vw 0;
    align-items: center;
}
    .box_left{
        width: 21vw;
        height: 21vw;
        overflow: hidden;
        border-radius: 50%;
        margin: 0 8vw 0 3vw;

       
    }
    .box_left>img{
        height: 100%;
        width: 100;
        transform: scale(1.4)
    }
    .englishName{
        font-size: 3vw;
        color:#aeaeae;
        margin: 2vw 0 3vw 0; 
    }
    .box_content{
        font-size: 4vw;
    }
    .names{
        font-size: 4.5vw;
    }
    .rightmost{
        font-size: 8vw;
        color: #f6f6f6;
        position: absolute;
        right: 4vw;
        
    }
</style>